<template>
	<view class="bg">
		<xl-navbar title="ThreeBox列表" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-three-box :items="items"></xl-three-box>
			<view class="title">设置宽高、间隙</view>
			<xl-three-box :items="items" height="320" leftWidth="300" gap="20"></xl-three-box>
			<view class="title">倾斜样式</view>
			<xl-three-box :items="items" leftWidth="320" gap="20" type="skew"></xl-three-box>
			<view class="title">使用插槽</view>
			<xl-three-box :items="items">
				<template #left="{ item }">
					<xl-image :src="item.img"></xl-image>
				</template>
				<template #rightTop="{ item }">
					<xl-image :src="item.img" style="width: 120rpx;"></xl-image>
				</template>
				<template #rightBottom="{ item }">
					<xl-image :src="item.img" style="width: 120rpx;"></xl-image>
				</template>
			</xl-three-box>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const items = ref([{
			title: '全过程追溯', 
			subTitle: '查看过程追溯', 
			background: 'linear-gradient(to bottom right, #fff5f2, #ffede8)', 
			img: '/static/imgs/box/item1.png', 
			url: 'tabs',
		},{
			title: '门店地图', 
			subTitle: '查看门店工厂', 
			background: 'linear-gradient(to right, #edfde2, #dfffd1)', 
			img: '/static/imgs/box/item2.png', 
			url: 'tabs',
		},{
			title: '产业链图', 
			subTitle: '查看数据分析', 
			background: 'linear-gradient(to right, #ffedee, #ffe6e7)', 
			img: '/static/imgs/box/item3.png', 
			imgStyle: { width: '100rpx', right: 0, bottom: 0},   // 可修改图片大小位置
			url: 'tabs', 
			params: {cur: 2},
		}
	])
	
	function clickItem(item){
		uni.$xl.toast(item.name)
	}
</script>

<style lang="scss" scoped>
</style>